<template>
	<view class="body p20">
		<view class="f28">近三个月消费汇总</view>
		<view class="bg-white mt20">
			<view class="p20 f28">消费趋势曲线图</view>
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
		</view>
		<view class="bg-white mt20">
			<view class="p20 f28">支付方式占比图</view>
			<qiun-data-charts type="pie" :opts="opts2" :chartData="chartData2" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartData: {
					categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
					series: [{
							name: "成交量A",
							data: [35, 8, 25, 37, 4, 20]
						},
						{
							name: "成交量B",
							data: [70, 40, 65, 100, 44, 68]
						},
						{
							name: "成交量C",
							data: [100, 80, 95, 150, 112, 132]
						}
					]
				},
				chartData2: {
					series: [{
						data: [{ "name": "一班", "value": 50 }, { "name": "二班", "value": 30 },
							{ "name": "三班", "value": 20 }, { "name": "四班", "value": 18 },
							{ "name": "五班", "value": 8 }
						]
					}]
				},
				opts: {
					title: {
						name: "消费趋势曲线图",
						fontSize: 16
					},
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [20, 10, 20, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				opts2: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
			}
		},
		onReady() {
			// this.getServerData();
		},
		methods: {

		}
	}
</script>

<style>

</style>